<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />
<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>

<html>
<head>
<title>EPCS - Thể loại sự kiện</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link rel='stylesheet' href='css/cupertino/jquery-ui.min.css' />

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src='js/moment.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>

</head>
<body>

	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./">Trang
							chủ</a></li>
					<li class="active">Thể loại sự kiện</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="5" subMenuOpen="2"></tag:SideBarTag>

		<div class="main-content">
			<div class="page-header">
				<h1>Các thể loại trên hệ thống </h1>
			</div>
			<div class="page-content">				
				<tag:MessageAlertTag></tag:MessageAlertTag>
				<div class="row">
				<s:set var="isLoadTopCategory" value="%{#request.LOAD_TOP_CATEGORY}"></s:set>
					<s:set var="systemCategoryList" value="%{#request.SYSTEM_CATEGORY_LIST}"></s:set>
					<s:set var="followedCategoryIDList" value="%{#request.FOLLOWED_CATEGORY_ID_LIST}"></s:set>
										
					<s:iterator var="categoryItem" value="%{#systemCategoryList}" status="counter">
						<s:set var="eventCategoryId" value="%{#categoryItem.eventCategoryId}"></s:set>							
						<s:set var="eventCategoryName" value="%{#categoryItem.eventCategoryName}"></s:set>	
						
						<s:set var="numberOfCategoryFollowing" value="%{#request.NUMBER_OF_CATEGORY_FOLLOWING}"></s:set>						
						<s:set var="index" value="%{#counter.index}"></s:set>					
						<s:set var="numberOfPeople" value="%{#numberOfCategoryFollowing[#index]}"/>
													
						<s:if test="%{#numberOfPeople == null}">
							<s:set var="numberOfPeople" value="0"/>	
						</s:if>
						
						<s:if test="%{#eventCategoryId in #followedCategoryIDList}">								
			                <!-- start row item -->
			                <s:include value="CategoryFollowingArea.jsp">
			                	<s:param name="CategoryName" value="%{#eventCategoryName}"/>
			                	<s:param name="CategoryID"value="%{#eventCategoryId}"/>			                	
			                	<s:param name="Following" value="true"/>		
			                	<s:param name="NumberOfCategoryFollowing" value="%{#numberOfPeople}"/>				                		
			                </s:include>
			                <!-- end row item -->
			             </s:if>
	                	<s:else>
	                		<!-- start row item -->
			                <s:include value="CategoryFollowingArea.jsp">
			                	<s:param name="CategoryName" value="%{#eventCategoryName}"/>
			                	<s:param name="CategoryID"value="%{#eventCategoryId}"/>				                	
			                	<s:param name="Following" value="false"/>                		
			                	<s:param name="NumberOfCategoryFollowing" value="%{#numberOfPeople}"/>		                		
			                </s:include>
			                <!-- end row item -->
	                	</s:else>   
	                </s:iterator>


					<s:if test="%{#isLoadTopCategory == true}">
						<a style="margin-left:700px;" href="GetAllCategory.do">Xem tất cả</a>
					</s:if>
				</div>
				
			</div>
		</div>
		<!-- end body -->
	</div>

	<script>
		function changeCategoryFollowing(categoryID, setFollowing, button){
		    var numberOfFollow = $('#numberOfFollow_' + categoryID);
		    // ko cho user bấm nữa
		    button.setAttribute("disabled", "disabled");
		    
		    $.ajax({
	            url: "SaveFollowingCategory.do",
	            type: "post",
	            data: { categoryID: categoryID, following: setFollowing },
	            success: function (data) {
	            	if (data.json != "Unauthorized"){
	            	    // mở lại button cho user bấm
	            		button.removeAttribute("disabled");	   
	            		if (data.json != "Fail"){
		            		if (button.value == "Hủy theo dõi"){
			            		button.value = "Theo dõi";
			            		button.setAttribute("class","btn btn-success btn-xs");
			            		button.setAttribute("onclick","changeCategoryFollowing("+categoryID+",true, this)");
			            		numberOfFollow.html(parseInt(numberOfFollow.text()) - 1);
		            		
			            	}else if (button.value = "Theo dõi"){		            		
			            		button.value = "Hủy theo dõi";
			            		button.setAttribute("class","btn btn-danger btn-xs");	
			            		button.setAttribute("onclick","changeCategoryFollowing("+categoryID+",false, this)");
			            		numberOfFollow.html(parseInt(numberOfFollow.text()) + 1);
			            	}
	            		} else {
	            		    
	            		}
	            	} else {
	            		window.location.href = "Index.do";
	            	}
	            },
	            error: function (data) {
	                alert("Hệ thống tạm thời gián đoạn!");
	            }
	        });
		}
	</script>

</body>

</html>